<template>
  <div>
    <div class="wraper">
      <ul>
        <li v-for="(item,index) in articalList" :key="item.articleId" @click="toArticleList(item.articleId)">
          <div class="content">
            <p class="title">{{item.title}}</p>
            <span class="name">{{item.author_name}}</span>
            <span class="time">{{item.date}}</span>
          </div>
          <div class="picture">
            <img v-lazy="{ 
                  loading: 'http://alicdn.avicare.cn/group1/M00/01/42/O24cYVk6SI2Aab6hAAAnOPGrbVU193.jpg',
                  src: item.thumbnail_pic_s,
                  error: 'http://alicdn.avicare.cn/group1/M00/00/7F/O24cYVjt4GKAJovCAABAeKv7Krs288.jpg'}" @click="clickPic(item.thumbnailPath)"/>
          </div>
        </li>
      </ul>
      <tab></tab>
    </div>
 </div>
</template>

<script>
import Tab from "@/base/tab/tab";
export default {
  data() {
    return {
      articalList: []
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getArticles();
    });
  },
  methods: {
    getArticles() {
      this.$axios
        .post(process.env.mock + "/mock")
        .then(res => {
          this.articalList = res.data.data.projects;
        })
        .catch(error => {
          console.log(error);
        });
    },
    toArticleList(val) {
      this.$router.push({
        name: "articleDetail",
        query: { id: val }
      });
    }
  },
  components: {
    Tab
  }
};
</script>

<style lang="less" scoped>
.wraper {
  overflow: hidden;
  margin-bottom: 1rem;
  ul {
    width: 100%;
    li {
      padding: 0.2rem 0.3rem;
      height: 2.4rem;
      border-bottom: 1px solid #999;
      box-sizing: border-box;
      .content {
        float: left;
        width: 3.5rem;
        height: 2rem;
        position: relative;
        p {
          font-size: 0.3rem;
          color: #232323;
          font-weight: bold;
          height: 0.4rem;
        }
        .name {
          color: #ccc;
          font-size: 0.2rem;
          position: absolute;
          left: 0;
          bottom: 0;
        }
        .time {
          color: #ccc;
          font-size: 0.2rem;
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
      .picture {
        float: right;
        width: 3rem;
        height: 2rem;
        img {
          width: 3rem;
          height: 2rem;
        }
      }
    }
  }
}
</style>
